<template>
  <div class="login_cont">
    <div>
      <img src="@/assets/image/login/login.png" alt="">
    </div>
    <van-form @submit="onSubmit" label-width="5rem">
      <van-field v-model="form.username" name="用户名" label="用户名" autocomplete placeholder="请输入用户名" />
      <van-field v-model="form.password" type="password" name="密码" label="密码" autocomplete placeholder="请输入密码" />
      <div style="margin: 1rem;">
        <van-button block type="info" native-type="submit">立即登录</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      form: {
        username: "",
        password: "",
      },
    };
  },
  created() {},
  methods: {
    onSubmit() {
    //   window.console.dir(window.vm.$http === this.$http);
      if (this.form.username == "") {
        this.$toast("用户名不能为空");
      } else if (this.form.password == "") {
        this.$toast("密码不能为空");
      } else {
        this.$toast.success("登录成功");
        setTimeout(() => {
          this.$router.push("myManage");
        }, 1000);
      }
    },
  },
};
</script>

<style scoped lang="less">
.login_cont {
  background: linear-gradient(180deg, #a5f79d 0%, #6badf8 99%);
  background-size: cover;
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  img {
    width: 30vw;
    margin-bottom: 5rem;
  }
}
/deep/.van-field__control {
  padding: 3px 9px;
}
/deep/.van-field__body {
  border-bottom: 1px solid #eee;
}
.van-cell {
  background-color: transparent;
}
.van-cell::after {
  border: none;
}
.title {
  height: 4rem;
  line-height: 4rem;
  background-color: #07c160;
  color: #fff;
  text-align: center;
}

.van-button {
  height: 40px;
}
</style>